<template>
  <div style="width: 100%; overflow: auto;">
    <div class="table-top">
      <slot name="table-top" :table="tableSlotData"></slot>
    </div>
    <el-table
      highlight-current-row
      :data="tableData"
      v-loading="loading"
      @selection-change="tableSelectionChange"
      style="width: 100%"
      border
      stripe
    >
      <slot name="table-column" :table="tableSlotData" v-if="!tableModel"></slot>
      <template v-else>
        <template v-for="(column, index) in tableColumns">
          <el-table-column v-bind="column" :key="index">
            <template v-if="column.slot"></template>
          </el-table-column>
        </template>
      </template>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="tableSizeChange"
        @current-change="tableCurrentPageChange"
        :current-page="tableCurrentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="tablePageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableDataTotal"
        style="margin-top: 15px;text-align: right"
      ></el-pagination>
    </div>
    <slot name="others-elements" :table="tableSlotData"></slot>
  </div>
</template>

<script>
export default {
  props: {
    pageMethod: Function,
    tableModel: Object,
    tableName: String,
    tableForm: [Object],
    immediate: {
      type: Boolean,
      default: true
    },
    isDialopTable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      error: "",
      tableData: [],
      tableQuery: {
        search: ""
      },
      tableCurrentPage: 1,
      tablePageSize: 10,
      tableDataTotal: 0,
      tableSelectRows: [],
      throttle: require("lodash").throttle(this.tableCurrentPageChange, 300, {
        trailing: true,
        leading: false
      })
    };
  },
  computed: {
    pageQuery() {
      return {
        page: this.tableCurrentPage,
        page_size: this.tablePageSize // 分页
      };
    },
    tableSlotData() {
      return {
        loading: this.loading,
        error: this.error,
        data: this.tableData,
        query: this.tableQuery,
        currentPage: this.tableCurrentPage,
        pageSize: this.tablePageSize,
        dataTotal: this.tableDataTotal,
        selectRows: this.tableSelectRows,
        refresh: this.refresh
      };
    },
    tableColumns(){
      let result = []
      try {
        for(key in this.tableModel){
          let table = this.tableModel[key].table;
          if(table){
            let column = {};
            for(let tableKey in table){
              if(table[tableKey].constructor === Function){
                table[tableKey] = table[tableKey].call(this);
              }
              column[tableKey] = table[tableKey];
            }
            result.push(column);
          }
        }
        return result;
      } catch(e){
        return result;
      }
    }
  },
  mounted() {
    this.getPageSize();
    if (this.tableName) {
      this.useCacheFiliter();
    }
    if (this.immediate) {
      this.getPage();
    }
  },
  watch: {
    tableForm: {
      deep: true,
      handler(newValue, oldValue) {
        this.loading = true;
        this.tableQuery = {};
        for (const key in newValue) {
          if (newValue[key]) {
            this.tableQuery[key] = newValue[key];
          }
        }
        this.throttle.cancel();
        this.throttle();
      }
    }
  },
  methods: {
    getPage() {
      let reqParams = Object.assign({}, this.pageQuery, this.tableQuery);
      this.putCacheFiliter();
      this.loading = true;
      this.pageMethod(reqParams)
        .then(res => {
          this.tableDataTotal = res.data.total;
          this.tableData = res.data.list;
          this.loading = false;
        })
        .catch(error => {
          this.error = error.message;
          this.$message.warning(this.$t("message.get_data_fail"));
          this.loading = false;
        });
    },
    getPageSize() {
      // const pageSize = this.$store.state.pageSize[
      //   this.isDialopTable ? "dialopTablePageSize" : "commonTablePageSize"
      // ];
      // if (pageSize) {
      //   this.tablePageSize = pageSize;
      // }
    },
    refresh() {
      this.getPage();
    },
    tableSizeChange(value) {
      this.tablePageSize = value;
      this.getPage();
      // this.$store.dispatch(
      //   this.isDialopTable
      //     ? "pageSize/changeDialopTablePageSize"
      //     : "pageSize/changeCommonTablePageSize",
      //   value
      // );
    },
    tableCurrentPageChange(value = 1) {
      this.tableCurrentPage = value;
      this.getPage();
    },
    tableSelectionChange(value) {
      this.tableSelectRows = value;
      this.$emit("selection-change", value);
    },
    tableSearch() {
      this.loading = true;
      this.throttle.cancel();
      this.throttle();
    },
    /**
     * 要求表格此次查询使用缓存中的filiter
     */
    useCacheFiliter() {
      /**
       * 表格查询filiter的缓存与表格名称相关
       * 需要保证表格名称存在并不重复，才能使用
       */
      if (!this.tableName) {
        return;
      }
      // const filiterKey = this.tableName + "_TableFiliter";
      // const pageFiliter =
      //   this.$store.state.pageFiliter["commonTablePageFiliter"][filiterKey] ||
      //   {};

      // this.tableQuery = pageFiliter.tableQuery || this.tableQuery;
    },
    /**
     * 修改表格filiter的缓存
     */
    putCacheFiliter() {
      if (!this.tableName) {
        return;
      }
      // const filiterKey = this.tableName + "_TableFiliter";
      // this.$store.dispatch("pageFiliter/changeCommonTablePageFiliter", {
      //   key: filiterKey,
      //   option: {
      //     tableQuery: this.tableQuery
      //   }
      // });
    }
  }
};
</script>

<style>
</style>
